import React from "react"
import "./style.less"
// import current1 from "../../../../static/images/home_img/carousel1.jpg"
import { getCurrentPageData } from "../../../../fetch/home"
import { Link } from "react-router-dom"
import LoadMore from "../../LoadMore"

export default class CurrentList extends React.Component{
  constructor () {
    super();
    this.state = {
        data: [],
        hasMore: false,
        page: 1,
        isLoading: true  //判读数据是否处于请求状态，默认处于请求状态
    }
}
componentDidMount () {
  let keyWords = this.props.keyWords;
  this.httpRes(keyWords,1);
}
componentDidUpdate (prevPros,prevState) {
  let keyWords = this.props.keyWords;
  if(keyWords === prevPros.keyWords){
    return;
  }
  this.setState({
    page: 1
  })
  this.httpRes(keyWords,this.state.page);
}

httpRes(keyWords,page){
  getCurrentPageData(keyWords,page)
  .then(data => {
    this.setState({
      data: this.state.data.concat(data.data),
      hasMore: data.hasMore,
      isLoading: false,
      page: this.state.page+1
    })
  })
}
loadMoreFunc () {
  this.setState({
    isLoading: true
  })
  let keyWords = this.props.keyWords;
  this.httpRes(keyWords,this.state.page);
} 

    render () {
      let { data, hasMore, isLoading } = this.state;
      return (
        data.length>0?
        <div className="current-list-container">
        {
          data.map((ele,index) => {
            return (
              <div key={index}>
                <Link to={`/housedetail/${ele.id}`}>
                  <div className="current-house-info clear">
                    <img src={ ele.img } alt="图片加载失败" />
                    <div className="current-house-descript">
                      <p>{ ele.title.slice(ele.title.indexOf('·')+1) }</p>
                      <p>{ele.houseType}</p>
                      <p>{ele.rentType}</p>
                    </div>
                    <div className="current-rent">{ele.price}/月</div>
                  </div>
                </Link>
              </div>
            )
          })
        }
        {
          hasMore
          ?<LoadMore loadMoreFunc={this.loadMoreFunc.bind(this)} isLoading={ isLoading }/>
          :<div>我是有底线的...</div>
          }   
        </div>

        :
        <div className="isLoading">正在加载数据...</div>
      )
    }

}
